<template>
    <div class="tables-edit-outer">
        <div v-if="!isEditting" class="tables-edit-con">
            <span class="value-con">{{ value }}</span>
            <Button v-if="editable" @click="startEdit" class="tables-edit-btn" style="padding: 2px 4px" type="text"
                ><Icon type="md-create"></Icon
            ></Button>
        </div>
        <div v-else class="tables-editting-con">
            <Input :value="value" @input="handleInput" class="tables-edit-input" />
            <Button @click="saveEdit" style="padding: 6px 4px" type="text"><Icon type="md-checkmark"></Icon></Button>
            <Button @click="canceltEdit" style="padding: 6px 4px" type="text"><Icon type="md-close"></Icon></Button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TablesEdit',
    props: {
        value: [String, Number],
        edittingCellId: String,
        params: Object,
        editable: Boolean
    },
    computed: {
        isEditting() {
            return this.edittingCellId === `editting-${this.params.index}-${this.params.column.key}`
        }
    },
    methods: {
        handleInput(val) {
            this.$emit('input', val)
        },
        startEdit() {
            this.$emit('on-start-edit', this.params)
        },
        saveEdit() {
            this.$emit('on-save-edit', this.params)
        },
        canceltEdit() {
            this.$emit('on-cancel-edit', this.params)
        }
    }
}
</script>

<style lang="less">
.tables-edit-outer {
    height: 100%;
    .tables-edit-con {
        position: relative;
        height: 100%;
        .value-con {
            vertical-align: middle;
        }
        .tables-edit-btn {
            position: absolute;
            right: 10px;
            top: 0;
            display: none;
        }
        &:hover {
            .tables-edit-btn {
                display: inline-block;
            }
        }
    }
    .tables-editting-con {
        .tables-edit-input {
            width: ~'calc(100% - 60px)';
        }
    }
}
</style>
